<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>article</title>
    <link rel="stylesheet" href="../css/index.min.css">
    <link rel="stylesheet" href="../css/article.min.css">
    <script src="../js/hotcss.js"></script>
    <link rel="stylesheet" href="../css/searchBox.min.css">
    <link rel="stylesheet" href="../css/loginPage.min.css">
    <link rel="stylesheet" href="../css/logined.min.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script>
</head>

<body>
    <input style="width: 0; height: 0;" hidden id="switch" type="checkbox">
    <div class="container">
        <header class="header">
            <div  class="login">
                <img class="menu" src="../image/common_menu.png" alt="">
            </div>
            <!-- <img class="logo" src="./image/logo.png" alt=""> -->
            <div class="search" id="search">
                <img  src="../image/common_search.png" alt="">
            </div>
        </header>
        <div class="content">
            <div class="banner">
                <div class="swiper-container">
                    <div class="swiper-wrapper">

                        <div class="swiper-slide">
                            <img src="../image/05.jpg" alt="">
                            <div class="banner-text">
                                <div>[专业IMC平台]</div>
                                <div>太子金涂鸦大赛网络整合营销传播</div>
                            </div>
                        </div>

                        <div class="swiper-slide">
                            <img src="../image/article_01.jpg" alt="">
                            <div class="banner-text">
                                <div>[专业IMC平台]</div>
                                <div>太子金涂鸦大赛网络整合营销传播</div>
                            </div>
                        </div>

                        <div class="swiper-slide">
                            <img src="../image/cour_01.png" alt="">
                            <div class="banner-text">
                                <div>[专业IMC平台]</div>
                                <div>太子金涂鸦大赛网络整合营销传播</div>
                            </div>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
            
                    <!-- 如果需要导航按钮 -->
                    <!-- <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div> -->
            
                    <!-- 如果需要滚动条 -->
                    <div class="swiper-scrollbar"></div>
                </div>
                
            </div>

            <div class="article-Big">
                <div class="article">
                    <a href="../html/article-details.html">
                    <div class="article-content">
                        <img src="../image/article_01.jpg" alt="">
                        <div class="article-text">海天“晒“宴,和汪涵一起，参观海天酱油......</div>
                        <div class="market">
                            <button class="button">营销</button>
                            <div>
                                <img src="../image/like_g.png" alt="">
                                <span>120</span>
                                <img src="../image/eye_g.png" alt="">
                                <span>560</span>
                            </div>
                        </div>
                        <div class="information">
                            <img src="../image/mx-nologin.png" alt="">
                            <div>叶巧岚 &nbsp;&nbsp;2015年1月20日</div>
                        </div>
                    </div>
                </a>
                </div>
           
                <div class="article">
                    <a href="../html/article-details.html">
                    <div class="article-content">
                        <img src="../image/article_01.jpg" alt="">
                        <div class="article-text">海天“晒“宴,和汪涵一起，参观海天酱油......</div>
                        <div class="market">
                            <button class="button">营销</button>
                            <div>
                                <img src="../image/like_g.png" alt="">
                                <span>120</span>
                                <img src="../image/eye_g.png" alt="">
                                <span>560</span>
                            </div>
                        </div>
                        <div class="information">
                            <img src="../image/mx-nologin.png" alt="">
                            <div>叶巧岚 &nbsp;&nbsp;2015年1月20日</div>
                        </div>
                    </div>
                </a>
                </div>

                <div class="article">
                    <a href="../html/article-details.html">
                    <div class="article-content">
                        <img src="../image/article_01.jpg" alt="">
                        <div class="article-text">海天“晒“宴,和汪涵一起，参观海天酱油......</div>
                        <div class="market">
                            <button class="button">营销</button>
                            <div>
                                <img src="../image/like_g.png" alt="">
                                <span>120</span>
                                <img src="../image/eye_g.png" alt="">
                                <span>560</span>
                            </div>
                        </div>
                        <div class="information">
                            <img src="../image/mx-nologin.png" alt="">
                            <div>叶巧岚 &nbsp;&nbsp;2015年1月20日</div>
                        </div>
                    </div>
                </a>
                </div>

                <div class="article">
                    <a href="../html/article-details.html">
                    <div class="article-content">
                        <img src="../image/article_01.jpg" alt="">
                        <div class="article-text">海天“晒“宴,和汪涵一起，参观海天酱油......</div>
                        <div class="market">
                            <button class="button">营销</button>
                            <div>
                                <img src="../image/like_g.png" alt="">
                                <span>120</span>
                                <img src="../image/eye_g.png" alt="">
                                <span>560</span>
                            </div>
                        </div>
                        <div class="information">
                            <img src="../image/mx-nologin.png" alt="">
                            <div>叶巧岚 &nbsp;&nbsp;2015年1月20日</div>
                        </div>
                    </div>
                </a>
                </div>

                <div class="article">
                    <a href="../html/article-details.html">
                    <div class="article-content">
                        <img src="../image/article_01.jpg" alt="">
                        <div class="article-text">海天“晒“宴,和汪涵一起，参观海天酱油......</div>
                        <div class="market">
                            <button class="button">营销</button>
                            <div>
                                <img src="../image/like_g.png" alt="">
                                <span>120</span>
                                <img src="../image/eye_g.png" alt="">
                                <span>560</span>
                            </div>
                        </div>
                        <div class="information">
                            <img src="../image/mx-nologin.png" alt="">
                            <div>叶巧岚 &nbsp;&nbsp;2015年1月20日</div>
                        </div>
                    </div>
                </a>
                </div>

                <div class="article">
                    <a href="../html/article-details.html">
                    <div class="article-content">
                        <img src="../image/article_01.jpg" alt="">
                        <div class="article-text">海天“晒“宴,和汪涵一起，参观海天酱油......</div>
                        <div class="market">
                            <button class="button">营销</button>
                            <div>
                                <img src="../image/like_g.png" alt="">
                                <span>120</span>
                                <img src="../image/eye_g.png" alt="">
                                <span>560</span>
                            </div>
                        </div>
                        <div class="information">
                            <img src="../image/mx-nologin.png" alt="">
                            <div>叶巧岚 &nbsp;&nbsp;2015年1月20日</div>
                        </div>
                    </div>
                </a>
                </div>
            </div>
            <!-- <div class="hr"></div> -->
            <div class="more">
                加载更多
            </div>

        </div>
        <footer class="footer">
            <a href="../index.html">
                <img src="../image/01home_g.png" class="footerIcon">
                <p>首页</p>
            </a>
            <a>
                <img src="../image/03GIMC_g.png" class="footerIcon">
                <p>GIMC</p>
            </a>
            <a href="./article.html">
                <img src="../image/06article_r.png" class="footerIcon">
                <p>文章</p>
            </a>
            <a href="./resource.html">
                <img src="../image/07resou_g.png" class="footerIcon">
                <p>资源</p>
            </a>
            <a href="./lesson.html">
                <img src="../image/09college_g.png" class="footerIcon">
                <p>学院</p>
            </a>
        </footer>
    </div>
    <div class="search-box"> 
        <div class="input-bar">
            <img src="../image/login_close.png" alt="" id="closeBtn">
            <div class="input-con">
                <img src="..//image/fangdajing.png" alt="">
                <input type="text" placeholder="search">
            </div>
        </div>
        <div class="search-tips">
            <div class="title">热搜</div>
            <div class="item-box">
                <div class="items">项目管理</div>
                <div class="items">移动互联网</div>
                <div class="items">细分平台业务</div>
                <div class="items">O2O</div>
                <div class="items">媒介平台</div>
                <div class="items">项目管理</div>
                <div class="items">拥抱变革，创造未来</div>
                <div class="items">平台</div>
                <div class="items">上海金投赏创意奖</div>
            </div>
        </div>

    </div> 

    <div class="login-page">
        <img src="../image/login_close.png" alt="" class="loginClose" id="loginClose">
        <div class="wrapper">
            <img src="../image/common_logo.png" alt="" class="logo">
            <div class="msg">
                <form action="">
                    <div class="item">
                        <label for="username">
                            <img src="../image/login_01.png" alt="">
                        </label>
                        <input type="text" id="username">
                    </div>
                    <div class="item">
                        <label for="psw">
                            <img src="../image/login_02.png" alt="">
                        </label>
                        <input type="password" id="psw">
                    </div>
                </form>
                <div class="forget-psw">
                    <img src="../image/login_03.png" alt="">
                    <span>忘记密码</span>
                </div>
            </div>
            <div class="btns">
                <div class="loginBtn" id="loginBtn">登陆</div>
                <div class="register">注册</div>
            </div>
        </div>
    </div>

    <div class="logined-page">
        <div class="input-bar">
            <img src="../image/login_close.png" alt="" id="closeLoginedBtn">
            <div class="input-con">
                <img src="..//image/fangdajing.png" alt="">
                <input type="text" placeholder="search">
            </div>
        </div>
        <div class="my-profile">
            <div class="avator">
                <img src="../image/head_portrait.png" alt="">
            </div>
            <div class="me">
                <div class="name">
                    <div class="username">
                        陈小敏
                    </div>
                    <div class="person-center">
                        个人中心&gt;
                    </div>
                </div>
                <div class="stars">
                    <img src="../image/star.png" alt="">
                    <img src="../image/star.png" alt="">
                    <img src="../image/star.png" alt="">
                    <img src="../image/star.png" alt="">
                </div>
                <div class="relation">
                    <div class="follows">
                        关注<span>36</span>
                    </div>
                    <span class="middile">|</span>
                    <div class="fans">
                        粉丝<span>290</span>
                    </div>
                </div>
            </div>
            <div class="btn-tool">
                <button>我的收藏</button>
                <button>我的发布</button>
            </div>
        </div>
        <div class="line"></div>
        <div class="menus">
            <div class="items">
                <div class="title">
                    GIMC
                    <img src="../image/drop_left.png" alt="">
                </div>
                <ul>
                    <li>省广介绍</li>
                    <li>新闻资讯</li>
                </ul>
            </div>
            <div class="items">
                <div class="title">
                    文章
                    <img src="../image/drop_left.png" alt="">
                </div>
            </div>
            <div class="items">
                <div class="title">
                    资源
                    <img src="../image/drop_left.png" alt="">
                </div>
            </div>
            <div class="items">
                <div class="title">
                    课程
                    <img src="../image/drop_left.png" alt="">
                </div>
            </div>
        </div>
        <div class="login-out">
            <button id="loginOutBtn">退出</button>
        </div>
    </div>
    <script src="../js/search.js"></script>
    <script src="../js/showLogin.js"></script>

    <!-- <script src="../js/swiper-bundle.min.js"></script> -->
    <script>
        //初始化swiper        
        var mySwiper = new Swiper ('.swiper-container', {
        //   direction: 'vertical', // 垂直切换选项
          loop: true, // 循环模式选项
          
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
          
        //   如果需要前进后退按钮
        //   navigation: {
        //     nextEl: '.swiper-button-next',
        //     prevEl: '.swiper-button-prev',
        //   },
          
          // 如果需要滚动条
          scrollbar: {
            el: '.swiper-scrollbar',
          },
        })        
        </script>
</body>

</html>